//射线检测
import * as THREE from "../node_modules/three/build/three.module.js";
import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "../node_modules/three/examples/jsm/loaders/GLTFLoader";



var scene, camera, renderer, controls, loader, group, modelMesh, cube
//射线检测
var raycaster, mouse

function init() {
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(5, 5, 30)
    camera.lookAt(new THREE.Vector3(1, 1, 1))
    scene.add(camera)
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    //环境光
    var light = new THREE.AmbientLight(0x404040, 8);
    group = new THREE.Group();
    group.add(light);

    //鼠标控制器
    controls = new OrbitControls(camera, renderer.domElement);
    controls.update();

    //射线初始化
    raycaster = new THREE.Raycaster()
    mouse = new THREE.Vector2()
    mouse = { x: 99, y: -99 }//让射线初始化时,不要碰到模型
    window.addEventListener('mousemove', onMouseMove, false);
}

//模型加载
function loadModel(url) {
    return new Promise((reslove, reject) => {
        //加载模型
        loader = new GLTFLoader();
        loader.load(
            url,
            function (gltf) {
                let model = gltf.scene

                //模型的Mesh藏的比较深,需要这样获得
                model.traverse(object => {
                    if (object.isMesh) {
                        modelMesh = object
                    }
                })
                group.add(model);
                scene.add(group);
                reslove('Model load is OK')
            },
            undefined,
            function (error) {
                reject(error);
            }
        );
    })
}

function createBox() {
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    cube = new THREE.Mesh(geometry, material);
    console.log(cube);
    scene.add(cube);
}

function onMouseMove(event) {
    event.preventDefault();
    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

// 通过摄像机和鼠标位置更新射线
function raycasterCal() {
    // 通过摄像机和鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);

    //计算物体和射线的焦点
    var intersection = raycaster.intersectObject(modelMesh);

    console.log('mouse:', mouse);

    //选中的物体position.y上升1
    if (intersection.length > 0) {
        console.log('射线----->模型');
        modelMesh.rotation.y += 0.01
    }
}

//坐标系
function reference() {
    //参考系
    var material1 = new THREE.LineBasicMaterial({ color: 0xd63031 }); //红
    var material2 = new THREE.LineBasicMaterial({ color: 0x55efc4 }); //绿
    var material3 = new THREE.LineBasicMaterial({ color: 0x0984e3 }); //蓝
    var geometry1 = new THREE.Geometry();
    var geometry2 = new THREE.Geometry();
    var geometry3 = new THREE.Geometry();
    let l = 100
    geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry3.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry1.vertices.push(new THREE.Vector3(l, 0, 0));
    geometry2.vertices.push(new THREE.Vector3(0, l, 0));
    geometry3.vertices.push(new THREE.Vector3(0, 0, l));
    var line1 = new THREE.Line(geometry1, material1);
    var line2 = new THREE.Line(geometry2, material2);
    var line3 = new THREE.Line(geometry3, material3);
    scene.add(line1);
    scene.add(line2);
    scene.add(line3);
}

function animate() {
    requestAnimationFrame(animate)
    raycasterCal()
    renderer.render(scene, camera);
}

async function all() {
    init()

    let url = "../src/models/viking_room/scene.gltf"
    await loadModel(url)

    // createBox()
    reference()
    animate()
}

all()
